<template>
	<view>
		<view class="">
			<view class="">日新增用户</view>
		</view>
		<view class="ucharts">
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="canvascharts" @touchstart="touchLineA"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../js_sdk/u-charts/u-charts.js';
	var _self;
	var canvaLineA = null;
	const db = uniCloud.database();

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				/* datachart: {
					"LineA": {
						"categories": ["2020-12-10", "2020-12-11", "2020-12-12", "2020-12-13", "2020-12-14", "2020-12-15", "2020-12-16", "2020-12-17", "2020-12-18"
						],
						"series": [{
							"name": "日新增用户量",
							"data": [0, 0, 0, 0, 0, 1, 0, 0, 1]
						}]
					}
				}, */
				startdate: new Date(new Date().getTime() - 1000*60*60*24*7), // 默认开始时间是7天前
				enddate: new Date()
			}
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.cloudData2localData();
		},
		methods: {
			cloudData2localData() {
				db.collection('uni-id-users')
					.where("register_date>=" + _self.startdate.getTime() + " && register_date<=" + _self.enddate.getTime())
					.groupBy('dateToString(add(new Date(0),register_date),"%Y-%m-%d","+0800") as date')
					.groupField('count(*) as count')
					.get()
					.then((res) => {
						const resdata = res.result.data
						console.log("resdata: ", resdata);
						if (resdata) {
							// 转换resdata的keyvalue方式为以日期为key的新json格式，方便后面用key的方式直接取数
							var newdata = {};
							resdata.forEach(function(v, i) {
								// 数据库的日期格式本地转换下，不然后面用key取不到
								newdata[new Date(v.date).toLocaleDateString()] = v;
							});
							console.log("newdata: ", newdata);
							// 循环日期从startdate到enddate，构造uchart组件需要的数据
							var idate = _self.startdate
							let tempLineA = {
								categories: [],
								series: [{
									"name": "日新增用户量",
									"data": []
								}]
							};
							while (idate <= _self.enddate) {
								tempLineA.categories.push(idate.toLocaleDateString())
								var newcount = 0
								// console.log(idate.toLocaleDateString());
								if (newdata[idate.toLocaleDateString()]) {
									// console.log("来过");
									newcount = newdata[idate.toLocaleDateString()].count
								}
								tempLineA.series[0].data.push(newcount)
								idate = idate.setDate(idate.getDate() + 1);
								idate = new Date(idate)
							}
							console.log("图表所需数据: ", tempLineA);
							_self.showLineA("canvasLineA", tempLineA); 
						}
					}).catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
						console.log(err.message);
					}).finally(() => {
						// uni.hideLoading()
					})

			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						// min: 10,
						// max: 180,
						format: (val) => {
							return val.toFixed(0) + ''
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});

			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			}
		}
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.ucharts {
		width: 750rpx;
		height: 500rpx;
		background-color: #FFFFFF;
	}

	.canvascharts {
		width: 750rpx;
		height: 500rpx;
		background-color: #FFFFFF;
	}
</style>
